<!DOCTYPE html>
<html>
<head>
    <title>CMS文章表</title>
    <#include "/header.html">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/layui/css/layui.css">
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" v-model="search.class_id "
                       @keyup.enter="query" placeholder="用户名">
            </div>
            <a class="btn btn-default" @click="query">查询</a>
            <#if shiro.hasPermission("article:cmsarticle:save")>
            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
        </#if>
        <#if shiro.hasPermission("article:cmsarticle:update")>
        <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
    </#if>
    <#if shiro.hasPermission("article:cmsarticle:delete")>
    <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
</#if>
</div>
<div class="col-sm-12 select-info table-striped">
    <table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>
</div>

<div v-show="!showList" class="panel panel-default">
    <div class="panel-heading">{{title}}</div>
    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-2 control-label">文章标题</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="cmsArticle.title" placeholder="文章标题"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">文章分类</div>
            <div class="col-sm-10">
                <select id="classId" name="classId" class="selectpicker"
                        data-live-search="true">
                </select>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">展示图片</div>
            <div class="layui-upload" style="width: 76%; float: right;">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" style="width:300px;height:300px" :src=src>
                    <p id="demoText"></p>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">文章排序0-255</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="cmsArticle.sort" placeholder="文章排序0-255"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">文章描述</div>
            <div class="col-sm-10">
                <!--<input type="text" class="form-control" v-model="cmsArticle.shortTitle" style="width:300px;height:200px"/>-->
                <TEXTAREA v-model="cmsArticle.shortTitle" style="width:300px;height:200px"></TEXTAREA>
            </div>

        </div>


        <div class="form-group">
            <div class="col-sm-2 control-label">文章正文</div>
            <div class="col-sm-10">
                <!--                             <input type="text" class="form-control" v-model="advertsDetail.content" placeholder="广告内容"/>
                 -->
                <div id="editor" style="width: 1000px;">

                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
            &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
        </div>
    </form>
</div>
</div>


<script src="${request.contextPath}/statics/plugins/layui/layui.js"></script>

<script src="${request.contextPath}/statics/js/uedit/ueditor.config.js"></script>
<script src="${request.contextPath}/statics/js/uedit/ueditor.all.js"></script>
<script src="${request.contextPath}/statics/js/uedit/lang/zh-cn/zh-cn.js"></script>

<script type="text/javascript">


    function getCateList() {
        $.ajax({
            url: baseURL + "article/nccmsarticleclass/list",//写你自己的方法，返回map，我返回的map包含了两个属性：data：集合，total：集合记录数量，所以后边会有data.data的写法。。。
            // 数据发送方式
            type: "get",
            // 接受数据格式
            dataType: "json",
            // 要传递的数据
            data: 'data',

            // 回调函数，接受服务器端返回给客户端的值，即result值
            success: function (data) {

                if (!data.data || data.data.length == 0) {
                    alert("文章分类还未添加，请先添加文件分类");
                }

                $.each(data.data, function (i) {
                    $('#classId').append(
                        "<option value=" + data.data[i].classId + ">"
                        + data.data[i].name + "</option>");
                });

                //$('#advertsId').selectpicker('render');
                $('#classId').selectpicker('refresh');

                $('#classId').selectpicker('render');

            },
            error: function (data) {

                alert("查询失败" + data);

            }
        })

    }

    $(function () {
        $("#bootstrap-table").bootstrapTable({
            method: 'get', // 服务器数据的请求方式 get or post
            url: baseURL + 'article/cmsarticle/page', // 服务器数据的加载地址
            showRefresh: true,
            showToggle: true,
            showColumns: true,
            showExport: true,
            sortName: "articleId",// 排序列名称
            sortOrder: "desc",
            sortable: true,
            toolbar: '#exampleToolbar',
            striped: true, // 设置为true会有隔行变色效果
            dataType: "json", // 服务器返回的数据类型
            pagination: true, // 设置为true会在底部显示分页条
            // queryParamsType : "limit",
            // //设置为limit则会发送符合RESTFull格式的参数
            singleSelect: false, // 设置为true将禁止多选
            // contentType : "application/x-www-form-urlencoded",
            // //发送到服务器的数据编码类型
            pageSize: 10, // 如果设置了分页，每页数据条数
            pageNumber: 1, // 如果设置了分布，首页页码
            // search : true, // 是否显示搜索框
            sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者
            // "server"
            queryParams: function (params) {
                let search = vm.search;
                search.limit = params.limit,
                    search.offset = params.offset,
                    search.sidx = params.sort, //排序列名
                    search.order = params.order //排位命令（desc，asc）
                return search;
            },

            columns: [
                {
                    checkbox: true
                },

                {
                    field: 'articleId', // 列字段名
                    title: '文章编号', // 列标题
                    sortable: true
                },


                {
                    field: 'title', // 列字段名
                    title: '文章标题', // 列标题
                    sortable: true
                },


                // {
                //     field: 'classId', // 列字段名
                //     title: '文章分类编号', // 列标题
                //     sortable: true
                // },
                {
                    field: 'className', // 列字段名
                    title: '文章分类名称', // 列标题
                    sortable: true
                },


                {
                    field: 'shortTitle', // 列字段名
                    title: '文章描述', // 列标题
                    sortable: true
                },
                //
                //
                // {
                // 		field : 'source', // 列字段名
                // 		title : '文章来源', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'url', // 列字段名
                // 		title : '文章来源链接', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'author', // 列字段名
                // 		title : '文章作者', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'summary', // 列字段名
                // 		title : '文章摘要', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'content', // 列字段名
                // 		title : '文章正文', // 列标题
                // 		sortable: true
                // },


                {
                    field: 'image', // 列字段名
                    title: '文章标题图片', // 列标题
                    sortable: true
                },

                //
                // {
                // 		field : 'keyword', // 列字段名
                // 		title : '文章关键字', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'articleIdArray', // 列字段名
                // 		title : '相关文章', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'click', // 列字段名
                // 		title : '文章点击量', // 列标题
                // 		sortable: true
                // },


                {
                    field: 'sort', // 列字段名
                    title: '文章排序0-255', // 列标题
                    sortable: true
                },


                // {
                // 		field : 'commendFlag', // 列字段名
                // 		title : '文章推荐标志0-未推荐，1-已推荐', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'commentFlag', // 列字段名
                // 		title : '文章是否允许评论1-允许，0-不允许', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'status', // 列字段名
                // 		title : '0-草稿、1-待审核、2-已发布、-1-回收站', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'attachmentPath', // 列字段名
                // 		title : '文章附件路径', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'tag', // 列字段名
                // 		title : '文章标签', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'commentCount', // 列字段名
                // 		title : '文章评论数', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'shareCount', // 列字段名
                // 		title : '文章分享数', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'publisherName', // 列字段名
                // 		title : '发布者用户名 ', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'uid', // 列字段名
                // 		title : '发布者编号', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'lastCommentTime', // 列字段名
                // 		title : '最新评论时间', // 列标题
                // 		sortable: true
                // },
                //
                //
                // {
                // 		field : 'publicTime', // 列字段名
                // 		title : '发布时间', // 列标题
                // 		sortable: true
                // },
                //

                {
                    field: 'createTime', // 列字段名
                    title: '文章发布时间', // 列标题
                    sortable: true
                },


                // {
                //     field : 'modifyTime', // 列字段名
                //     title : '文章修改时间', // 列标题
                //     sortable: true
                // },


                {
                    title: '操作',
                    field: 'id',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var e = '<a  class="btn btn-primary btn-sm '
                            + ''
                            + '" href="#" mce_href="#" title="编辑" onclick="edit(\''
                            + row.articleId
                            + '\')"><i class="fa fa-edit "></i></a> ';
                        var d = '<a class="btn btn-warning btn-sm '
                            + ''
                            + '" href="#" title="删除"  mce_href="#" onclick="remove(\''
                            + row.articleId
                            + '\')"><i class="fa fa-remove"></i></a> ';

                        return d;

                    }
                }
            ],

        });

        $("#classId").selectpicker({
            noneSelectedText: '请选择文章分类',
            liveSearchPlaceholder: "请输入关键字",
            noneResultsText: "内容无法匹配"
        });
        getCateList();
        // $('#advertsId').change(function(){
        //     console.info(	$('#advertsId').selectpicker('val'));
        //     console.info(	$("#advertsId  option:selected").text()  );
        // });
    });
    var editor;
    var vm = new Vue({
        el: '#rrapp',
        data: {
            search: {},
            showList: true,
            title: null,
            cmsArticle: {},
            src: '',
            type: null,
        },
        created: function () {
            this.initComponent();
        },
        methods: {
            query: function () {
                vm.reload();
            },
            add: function () {
                vm.showList = false;
                vm.title = "新增";
                vm.src='';
                editor.setContent("");
                vm.cmsArticle = {};
            },
            update: function (event) {
                var articleId = getSelectedRow();
                if (articleId == null) {
                    return;
                }
                vm.showList = false;
                vm.title = "修改";
                vm.getInfo(articleId.articleId);


            },


            saveOrUpdate: function (event) {
                vm.cmsArticle.className = $("#classId  option:selected").text();
                var content = editor.getContent();
                vm.cmsArticle.content = '';
                var url = vm.cmsArticle.articleId == null ? "article/cmsarticle/save?content=" + content : "article/cmsarticle/update?content=" + content;
                $.ajax({
                    type: "POST",
                    url: baseURL + url,
                    contentType: "application/json",
                    data: JSON.stringify(vm.cmsArticle),
                    success: function (r) {
                        if (r.code === 0) {
                            alert('操作成功', function (index) {
                                vm.reload();
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            },
            del: function (event) {
                var articleIds = getSelectedRows();
                if (articleIds == null) {
                    return;
                }
                articleIds = $.map(articleIds, function (row) {
                    return row.articleId;
                });
                confirm('确定要删除选中的记录？', function () {
                    $.ajax({
                        type: "POST",
                        url: baseURL + "article/cmsarticle/delete",
                        contentType: "application/json",
                        data: JSON.stringify(articleIds),
                        success: function (r) {
                            if (r.code == 0) {
                                alert('操作成功', function (index) {
                                    $("#jqGrid").trigger("reloadGrid");
                                });
                            } else {
                                alert(r.msg);
                            }
                        }
                    });
                });
            },
            getInfo: function (articleId) {
                $.get(baseURL + "article/cmsarticle/info/" + articleId, function (r) {
                    vm.cmsArticle = r.cmsArticle;
                    $('#classId').selectpicker("val", vm.cmsArticle.classId);

                    vm.src = imgURL + vm.cmsArticle.image;
                    editor.setContent(vm.cmsArticle.content);
                });
            },
            reload: function (event) {
                vm.showList = true;
                $('#bootstrap-table').bootstrapTable('refresh');
            },
            initComponent: function () {
                //编辑器配置
                editor = UE.getEditor('editor', {
                    serverUrl: 'http://127.0.0.1:8089/freeter-admin/ueditor/config',
                    enableAutoSave: false,
                    saveInterval: 0,
                    toolbars: [
                        [
                            'source', // 源代码
                            'bold', // 加粗
                            'italic', // 斜体
                            'underline', // 下划线
                            'strikethrough', // 删除线
                            'forecolor', // 字体颜色
                            'backcolor', // 背景色
                            'fontfamily', // 字体
                            'fontsize', // 字号
                            'paragraph', // 段落格式
                            'justifyleft', // 居左对齐
                            'justifycenter', // 居中对齐
                            'justifyright', // 居右对齐
                            'superscript', // 上标
                            'blockquote', // 引用
                            'selectall', // 全选
                            'preview', // 预览
                            'removeformat', // 清除格式
                            'inserttable', // 插入表格
                            'unlink', // 取消链接
                            'insertrow', // 前插入行
                            'insertcol', // 前插入列
                            'mergeright', // 右合并单元格
                            'mergedown', // 下合并单元格
                            'deleterow', // 删除行
                            'deletecol', // 删除列
                            'splittorows', // 拆分成行
                            'splittocols', // 拆分成列
                            'splittocells', // 完全拆分单元格
                            'deletecaption', // 删除表格标题
                            'inserttitle', // 插入标题
                            'mergecells', // 合并多个单元格
                            'deletetable', // 删除表格
                            'cleardoc', // 清空文档
                            'insertimage', // 多图上传
                            'simpleupload', //单图上传
                            'link', // 超链接
                            'insertorderedlist', // 有序列表
                            'insertunorderedlist', // 无序列表
                            'fullscreen', // 全屏
                            'directionalityltr', // 从左向右输入
                            'directionalityrtl', // 从右向左输入
                            'imagenone', // 默认
                            'imageleft', // 左浮动
                            'imageright', // 右浮动
                            'imagecenter', // 居中
                            'lineheight', // 行间距
                            'customstyle', // 自定义标题
                        ]
                    ],
                });
                editor.ready(function () {
                    editor.setHeight(800);
                });

                Vue.nextTick(function () {
                    layui.use('upload', function () {
                        var $ = layui.jquery
                            , upload = layui.upload;

                        //普通图片上传
                        var uploadInst = upload.render({
                            elem: '#test1'
                            , url: baseURL + 'sys/oss/old/upload'
                            , before: function (obj) {
                                //预读本地文件示例，不支持ie8
                                console.log(JSON.stringify(obj), "before");
                                obj.preview(function (index, file, result) {
                                    $('#demo1').attr('src', result); //图片链接（base64）
                                });
                            }
                            , done: function (res) {
                                //如果上传失败
                                console.log(JSON.stringify(res), "done");
                                if (res.code > 0) {
                                    return layer.msg('上传失败');
                                }
                                vm.cmsArticle.image = res.data[0];
                                layer.msg('上传成功');
                                //上传成功
                            }
                            , error: function () {
                                //演示失败状态，并实现重传
                                var demoText = $('#demoText');
                                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                                demoText.find('.demo-reload').on('click', function () {
                                    uploadInst.upload();
                                });
                            }
                        });
                    });
                });
            }
        }
    });


    function edit(id) {

        layer.open({
            type: 2,
            title: '编辑',
            maxmin: true,
            //shadeClose : false, // 点击遮罩关闭层
            area: ['800px', '520px'],
            content: "cmsArticleEdit.html?articleId=" + id // iframe的url
        });
    }

    function remove(id) {
        var arr = new Array();
        arr.push(id);
        confirm('确定要删除选中的记录？', function () {

            $.ajax({
                type: "POST",
                url: baseURL + "article/cmsarticle/delete",
                contentType: "application/json",
                data: JSON.stringify(arr),
                success: function (r) {
                    if (r.code == 0) {
                        alert('操作成功', function () {
                            vm.reload();
                        });
                    } else {
                        alert(r.msg);
                    }
                }
            });
        });
    }
</script>

</body>
</html>